<template>
    <h3>图书列表</h3>
    <el-table :data="books" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="书名" width="480" />
        <el-table-column prop="genre" label="类别" width="200" />
        <el-table-column label="出版日期" width="300">
            <template #default="scope">
                <div>
                    {{ formatDate(scope.row.publishDate) }}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="ebookPrice" label="电子书价格" width="200" />
        <el-table-column prop="printPrice" label="印刷书价格" width="200" />
    </el-table>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import axios from '../axios'
const books = reactive([]);

onMounted(async () => {
    const resp=await axios.get("/api/books");
    books.push(...resp.data);
})
function formatDate(s) {
    const date = new Date(s);
    const formatDate = date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
    return formatDate;
}

</script>